<script setup>
import { ref, reactive, toRefs, computed, onBeforeMount } from 'vue'
import { listNodeHandler as listHandler, listClusterHandler } from '../../api/cluster.js'

import Edit from './Edit.vue'
import Detail from './Detail.vue'
import TaintOption from './components/TaintOption.vue'
import MatchPod from '../components/MatchPod.vue';

import { useRoute } from 'vue-router'

const route = useRoute()
const data = reactive({
    items: [],
    clusterList: [],
    clusterId: "",
    editItem: {},
    editNodeName: "",
    detailItem: {},
    detailNodeName: "",
    createName: "",

})
// const loading = ref(true)
const editDialog =ref(false)
const detailDialog = ref(false)
const value1 = ref(false)

// 获取node列表
const getlist = (clusterId) => {
    console.log("查询集群:", clusterId)
    listHandler(clusterId).then((response) => {
        data.items = response.data.data.items
        editDialog.value = false
    })

}

// 编辑节点
const edit = (row) => {
    console.log("编辑节点:", row)
    data.editItem = row
    data.editNodeName = row.metadata.name
    editDialog.value = true
}

const detail = (row) => {
    data.detailItem = row
    data.detailNodeName = row.metadata.name
    detailDialog.value = true
}
const closeDialog = () => {
    getlist(data.clusterId)
}
const rollback = () => {
    editDialog.value = false
}

// 搜索框过滤
const filterTableData = computed(() =>
  data.items.filter(
    (item) =>
      !search.value ||
      item.metadata.name.toLowerCase().includes(search.value.toLowerCase()) ||
      item.status.addresses[0].address.toLowerCase().includes(search.value.toLowerCase())
  )
)
const search = ref('')


const getClusterList = async() => {
    await listClusterHandler().then(
        (res) => {
            data.clusterList = res.data.data.items
        }
    )
}

onBeforeMount(async() => {
    

    // 获取集群列表 支持查看多个集群列表 如果没有指定集群则给一个默认值
    await getClusterList()
    // 定义默认集群
    const defaultClusterSelected = data.clusterList[0].clusterId
    console.log("默认集群：",defaultClusterSelected)

    const curClusterId = route.query.clusterId // 3. 获取当前请求是否携带了集群ID的参数
    data.clusterId = curClusterId?curClusterId:defaultClusterSelected
    getlist(data.clusterId) // 查询列表之前要知道查询的是哪个集群的节点列表


})
const { clusterId, clusterList, editItem, editNodeName, detailItem, detailNodeName, } = toRefs(data)
</script>

<template>
    <el-card class="box-card">
    <template #header>
        <div class="card-header">
            <div>
                <span>节点列表</span>
            </div>
            <div  class="card-header">
                <el-select filterable v-model="clusterId" placeholder="选择集群" style="width: 180px" @change="getlist(clusterId)">
                    <el-option
                    v-for="item in clusterList"
                    :key="item.clusterId"
                    :label="item.displayName"
                    :value="item.clusterId"
                    :disabled="item.status =='InActive'"
                    />
                </el-select>
                <el-input v-model="search" size="small" placeholder="搜索" style="width: 140px; margin-left: 10px; height: 32px;"/>
            </div>
        </div>
    </template>

        <!-- 真实数据 -->
        <el-table :data="filterTableData" style="width: 100%" height="500" stripe border>
            <el-table-column fixed prop="" label="主机名" align="center">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="detail(scope.row)">{{ scope.row.metadata.name}}</el-button>
                </template>
            </el-table-column>
            <el-table-column fixed prop="status.addresses[0].address" label="ip地址" width="180" align="center"/>


            <el-table-column fixed prop="metadata.name" label="角色" width="90" align="center" sortable>
                <template #default="scope">
                    <span v-if="scope.row.metadata.labels.hasOwnProperty('node-role.kubernetes.io/control-plane')
                    || scope.row.metadata.labels.hasOwnProperty('node-role.kubernetes.io/controlplane')
                    || scope.row.metadata.labels.hasOwnProperty('ode-role.kubernetes.io/master')">
                        控制节点
                    </span>
                    <span v-else>工作节点</span>
                </template>
            </el-table-column>
            <el-table-column fixed prop="status" label="节点状态" width="100"  align="center" sortable>
                <template #default="scope">
                    <span v-if="scope.row.status.conditions[scope.row.status.conditions.length-1].status=='True'" style="color: green;">Ready</span>
                    <span v-else style="color:red">NotReady</span>
                </template>
            </el-table-column>

            <el-table-column prop="" label="禁止调度" width="180" align="center">
                <template #default="scope">
                    <TaintOption
                    :cluster-id="clusterId"
                    :item="scope.row"
                    taint-type="NoSchedule"
                    :key="scope.row.metadata.name + 'NoSchedule'"
                    >
                    </TaintOption>
                </template>
            </el-table-column>

            <el-table-column prop="" label="驱逐" width="180" align="center">
                <template #default="scope">
                    <TaintOption
                    :cluster-id="clusterId"
                    :item="scope.row"
                    taint-type="NoExecute"
                    :key="scope.row.metadata.name + 'NoExecute'"
                    >
                    </TaintOption>
                </template>
            </el-table-column>


            <el-table-column fixed="right" label="操作" min-width="180">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
                <MatchPod
                :cluster-id="clusterId"
                button-name="查看pod"
                resource-type="节点"
                :resource-name="scope.row.metadata.name"
                :field-selector="'spec.nodeName=' + scope.row.metadata.name"
                ></MatchPod>
            </template>
            </el-table-column>
        </el-table>
        <!-- 尾部布局 -->
        <div v class="auto-space-between" style="margin-top: 10px;">
            <div>批量操作</div>
            <div>总数：{{ filterTableData.length }}</div>
        </div>
    </el-card>
    <el-dialog
    destroy-on-close
    @close="closeDialog()"
    :title="'正在编辑集群:'+ clusterId+ ' 节点:'+ editNodeName"
    v-model="editDialog"
    width="70%"
    >
    <Edit @rollback="getlist" :cluster-id="data.clusterId" :item-form="editItem"></Edit>
    </el-dialog>
    <el-dialog
    destroy-on-close 
    v-model="detailDialog" 
    :title="'集群:' + clusterId + '  节点:' + detailNodeName"
    width="70%">
      <Detail :item="detailItem" :cluster-id="clusterId"></Detail>
    </el-dialog>


</template>

<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.text {
    font-size: 14px;
}
.item {
    margin-bottom: 18px;
}
</style>
